<template>
  <a-layout class="designer-wrapper">
    <a-layout-header class="designer-header">
      <a-button type="primary" @click="save">保存</a-button>
      <a-button>发布</a-button>
    </a-layout-header>

    <a-layout class="designer-body">
      <a-layout-sider class="left-wrapper" theme="light" width="300">
        <WidgetList />
      </a-layout-sider>
      <a-layout-content class="center-wrapper">
        <DesignPanel />
      </a-layout-content>
      <a-layout-sider class="right-wrapper" theme="light" width="300">
        <AttributePanel />
      </a-layout-sider>
    </a-layout>
  </a-layout>
</template>

<script lang="ts">
import { defineComponent, provide, inject, ref, onMounted, Ref } from 'vue'
import { getProjectInfo } from '@/api/project'
import WidgetList from '../components/WidgetList.vue'
import DesignPanel from '../components/DesignPanel.vue'
import AttributePanel from '../components/AttributePanel.vue'

export default defineComponent({
  components: { WidgetList, DesignPanel, AttributePanel },
  setup() {
    let curPage: Ref<Record<string, any> | null> = ref(null)
    let widgetList = ref([])
    let curWidget: Ref<Record<string, any> | null> = ref(null)
    let navigation: Ref<Record<string, any> | null> = ref(null)
    provide('curPage', curPage)
    provide('widgetList', widgetList)
    provide('curWidget', curWidget)
    provide('navigation', navigation)

    onMounted(async () => {
      const res = await getProjectInfo()
      // todo 给 curPage curWidget widgetList 赋值

      navigation.value = res.navigation

      curPage.value = {
        id: '001',
        name: '页面配置',
        icon: '',
        componentName: 'GfPage',
        sort: 1,
        attributes: {},
        styles: {
          padding: { top: 0, right: 0, bottom: 0, left: 0 },
          backgroundColor: '#ffffff',
          backgroundImage: ''
        }
      }
      curWidget.value = curPage.value
    })

    // let dragstatus = ref(false)
    // provide('dragstatus', dragstatus)
    // let dragWidget = ref(null)
    // provide('dragWidget', dragWidget)

    const save = () => {
      console.log({
        navigation: navigation.value,
        pages: [{ ...curPage.value, componentList: widgetList.value }]
      })
    }

    return {
      save
    }
  }
})
</script>

<style lang="scss" scoped>
.designer-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  .designer-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .ant-btn {
      margin-left: 10px;
    }
  }
  .designer-body {
    background-color: #f3f7fa;
    padding: 10px;
    flex: 1;
    display: flex;
    align-items: stretch;
    .left-wrapper {
      background-color: #fff;
      box-shadow: 2px 2px 6px 0 rgba(136, 156, 176, 0.2);
      border-radius: 4px;
    }
    .center-wrapper {
      flex: 1;
      padding: 0 10px;
    }
    .right-wrapper {
      background-color: #fff;
      box-shadow: 2px 2px 6px 0 rgba(136, 156, 176, 0.2);
      border-radius: 4px;
    }
  }
}
</style>
